<template>
  <div class="search-history">
    <van-cell-group class="group">
      <van-cell title="搜索历史" icon="bulb-o" class="lishi">
        <div v-if="isDeleteShow && searchHistories.length">
          <span @click="$emit('clear-search-histories')">全部删除</span>
          &nbsp;&nbsp;
          <span @click="isDeleteShow = false">完成</span>
        </div>
        <van-icon v-else name="delete" @click="isDeleteShow = true" />
      </van-cell>
       <!--每个van-cell点击的时候删除-->
      <van-cell
        :title="item"
        v-for="(item, index) in searchHistories"
        :key="index"
        @click="onHistoryClick(item, index)"
      >
        <van-icon v-show="isDeleteShow" name="close" />
      </van-cell>
    </van-cell-group>
   
    <van-cell title="热门搜索" icon="fire-o" class="lishi"></van-cell>
    <van-cell
      class="hotitem"
      :title="item.keyword"
      v-for="item in hotlist"
      :key="item.keyword"
      @click="onhotClick(item.keyword)"
    >
    </van-cell>
  </div>
</template>

<script>
import { gethotlist } from "@/api/search";

export default {
  name: "SearchHistory",
  components: {},
  props: {
    // 搜索历史，接收外部传入数据
    searchHistories: {
      type: Array,
      required: true,
    },
  },
  data() {
    return { isDeleteShow: false, hotlist: [] };
  },
  computed: {},
  watch: {},
  created() {
    this.gethotlist();
  },
  mounted() {},
  methods: {
    onHistoryClick(item, index) {
      // 如果是删除状态，则执行删除操作
      if (this.isDeleteShow) {
        // 删除历史记录
        this.searchHistories.splice(index, 1);
      } else {
        // 执行搜索操作
        this.$emit("search", item);
      }
    },
    onhotClick(item, index) {
      // 执行搜索操作
      this.$emit("search", item);
    },
    async gethotlist() {
      const { data } = await gethotlist();
      this.hotlist = data.data.hotKeywordList;
    },
  },
};
</script>

<style scoped lang="less">
.lishi {
  font-size: 32px;
  color: #333;
}
.group{
  border-bottom: 20px solid #eee;
}
</style>
